<template>
	<view class="container">
		<u-navbar
			title="我的邀请" 
			:background="{backgroundColor: '#fff'}"
		></u-navbar>
		<z-paging
			ref="paging"
			v-model="dataList"
			@query="getList" 
			auto-show-back-to-top 
			:empty-view-text="emptyText" 
			:empty-view-img="emptyImg" 
		>
			<template v-slot:top>
				<view :style="{'margin-top': sHeight}">
					<view style="width: 100%;background-color: rgba(0,0,0,0);">
						<u-tabs
							name="name" 
							count="" 
							class="twoTab"
							:list="tabList" 
							bg-color="rgba(0,0,0,0)"
							:is-scroll="true" 
							v-model="sortType"
							@change="changeTab"
							active-color="#3b8cdc"
							inactive-color="#999"
							:active-item-style="{
								backgroundColor: '#E1F0FF'
							}"
						></u-tabs>
					</view>
				</view>
			</template>
			<view class="content_item flex justify-btw align-center" v-for="item in dataList" :key="item.id">
				<view class="left flex justify-start align-center" style="height: 100%;">
					<image style="width: 106rpx;height: 106rpx;margin-right: 30rpx;" :src="item.userInfo.avatar" mode=""></image>
					<view class="flex_clm justify-btw align-start" style="height: 100%;">
						<text class="text_1" style="margin-bottom: 19rpx;">{{ item.userInfo.nickname }}</text>
						<view class="flex justify-start align-end">
							<image style="width: 28rpx;height: 28rpx;" src="../../static/images/phone_icon.png" mode=""></image>
							<text class="text_2" style="position: relative;top:3rpx;">{{ item.userInfo.mobile }}</text>
						</view>
					</view>
				</view>
				<view class="right flex_clm justify-btw">
					<view class="top flex justify-start align-center" style="margin-bottom: 26rpx;">
						<text class="text_3">订单次数：</text> <text class="text_4">{{ item.orderNum }}</text>
					</view>
					<view class="bottom flex justify-start align-center">
						<text class="text_3">分到订单佣金：</text> <text class="text_4">{{ item.orderPrice }}</text>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
import {getCurrentInstance, ref } from 'vue'
import { onLoad, onUnload, onShow } from "@dcloudio/uni-app"
const { proxy } = getCurrentInstance()
const emptyText = '没有更多了'
const empty = 'http://jinjukeji.oss-cn-hangzhou.aliyuncs.com/cardoctor1663661926837.png'
const dataList = ref([])
const sHeight = ref('')
const sortType = ref(0)
const tabList = ref([
		{name: '金额升序', value:1},
		{name: '金额倒序', value:2},
		{name: '邀请时间升序', value:3},
		{name: '邀请时间倒序', value:4 },
	])
onLoad(()=>{
	getStatusHeight()
})
function getStatusHeight() {
	sHeight.value = uni.getSystemInfoSync().statusBarHeight + 64 + 'px';
}
function changeTab(){
	proxy.$nextTick(()=>{
		setTimeout(()=>{
			proxy.$refs.paging.refresh()
		}, 100)
	})
}
function getList(pageNo, pageSize){
	let query = {
		pageNo: pageNo,
		pageSize,
		sortType: sortType.value+1
	}
	proxy.api.myInvitationList(query).then(res=>{
		proxy.$refs.paging.complete(res.data.data.records);
	})
}
</script>

<style lang="scss">
	.twoTab ::v-deep .u-tab-bar{
		display: none !important;
	}
	.twoTab ::v-deep .u-tab-item{
		font-size: 24rpx !important;
		height: 52rpx !important;
		line-height: 52rpx !important;
		// background-color: red !important;
		border-radius: 27rpx !important;
		margin: 0rpx 0 !important;
	}
	.twoTab ::v-deep .u-scroll-box{
		padding-left: 20rpx !important;
		padding-right: 20rpx !important;
	}
	.text_1{
		@include str(28rpx, bold, #333);
		line-height: 40rpx;
	}
	.text_2{
		@include str(24rpx, 500, #666);
		line-height: 33rpx;
	}
	.text_3{
		@include str(22rpx, 500, #999);
		line-height: 30rpx;
	}
	.text_4{
		@include str(30rpx, bold, $uni-color-primary);
		line-height: 42rpx;
	}
	.container {
		width: 100vw;
		height: 100vh;
		overflow-y: scroll;
		background-color: $uni-bg-color-grey;
		.content_item {
			width: calc(100vw - 40rpx);
			margin-left: 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 28rpx 24rpx 28rpx 30rpx;
		}
	}
</style>